<template>
  <div class="app-container">
    <el-form
      ref="forms"
      :model="form"
      inline
      :rules="rules"
      label-width="120px"
    >
      <el-divider content-position="left">地址信息</el-divider>
      <el-form-item label="客户订单号" prop="waybillNo">
        <el-input v-model.trim="form.waybillNo"></el-input>
      </el-form-item>
      <el-form-item label="销售产品" prop="marketProducts">
        <el-select
          v-model="form.marketProducts"
          filterable
          placeholder="请输入销售产品"
          clearable
        >
          <el-option
            v-for="dict in dicts[DictDirection.产品]"
            :key="dict.salesProductCode"
            :label="dict.salesProductName"
            :value="dict.salesProductCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收货站点" prop="receivingSite">
        <el-select
          v-model="form.receivingSite"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="dict in dicts[DictDirection.收货站点]"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收货人姓名" prop="consigneeName">
        <el-input v-model.trim="form.consigneeName"></el-input>
      </el-form-item>
      <el-form-item label="收货人地址1" prop="consigneeAddress">
        <el-input v-model="form.consigneeAddress"></el-input>
      </el-form-item>
      <el-form-item label="收货人地址2" prop="consigneeAddress2">
        <el-input v-model="form.consigneeAddress2"></el-input>
      </el-form-item>
      <el-form-item label="收货人城市" prop="consigneeCity">
        <el-input v-model.trim="form.consigneeCity"></el-input>
      </el-form-item>
      <el-form-item label="收货人省州" prop="provinceStateCode">
        <el-input v-model.trim="form.provinceStateCode"></el-input>
      </el-form-item>
      <el-form-item label="收货人邮编" prop="consigneePostcode">
        <el-input v-model="form.consigneePostcode"></el-input>
      </el-form-item>
      <el-form-item label="收货人国家" prop="consigneeCountry">
        <el-select
          v-model="form.consigneeCountry"
          filterable
          placeholder="请输入内容"
        >
          <el-option
            v-for="dict in dicts[DictDirection.国家]"
            :key="dict.countryCode"
            :label="dict.countryChName"
            :value="dict.countryCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收件人电话" prop="consigneeTel">
        <el-input v-model.trim="form.consigneeTel"></el-input>
      </el-form-item>
      <el-form-item label="亚马逊代码" prop="fbaNo">
        <el-input v-model.trim="form.fbaNo"></el-input>
      </el-form-item>
      <el-form-item label="vat号" prop="vat">
        <el-input v-model.trim="form.vat"></el-input>
      </el-form-item>
      <el-form-item label="备注(VAT信息)" prop="vatRemarks">
        <el-input v-model="form.vatRemarks"></el-input>
      </el-form-item>
      <el-form-item label="申报币种" prop="reportingCurrency">
        <el-select
          v-model="form.reportingCurrency"
          filterable
          clearable
        >
          <el-option
            v-for="dict in dicts[DictDirection.收款币种]"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="带电" prop="electrified">
        <el-checkbox
          v-model="form.electrifed"
          style="width: 178px;"
          true-label="1"
          false-label=""
        ></el-checkbox>
      </el-form-item>
      <el-form-item label="带磁" prop="magneticBelt">
        <el-checkbox
          v-model="form.magneticBlt"
          style="width: 178px;"
          true-label="2"
          false-label=""
        ></el-checkbox>
      </el-form-item>
      <el-form-item label="报关" prop="declare">
        <el-checkbox
          v-model="form.declar"
          style="width: 178px;"
          true-label="4"
          false-label=""
        ></el-checkbox>
      </el-form-item>
      <el-form-item label="清关" prop="customs">
        <el-checkbox
          v-model="form.customs"
          style="width: 178px;"
          true-label="8"
          false-label=""
        ></el-checkbox>
      </el-form-item>

      <el-divider content-position="left">包裹信息</el-divider>
      <el-row class="mb8">
        <el-col>
          <el-button type="primary" @click="handleAddPackage">增加</el-button>
          <el-button :disabled="multiple" type="danger" @click="handleDelPackage">删除</el-button>
          <div class="fillContainer">
            <span>把第</span>
            <el-input-number v-model="fillStart" :min="0" :controls="false"></el-input-number>
            行填充
            <el-input-number v-model="fillCount" :min="0" :controls="false"></el-input-number>
            <span>行</span>
            <el-button type="primary" style="margin-left: 5px;" @click="onFill">确定</el-button>
          </div>
        </el-col>
      </el-row>
      <vxe-grid
        ref="xGrids"
        :data="form.sysOrderCategoryOrSafeguardList"
        v-bind="gridOptions1"
        :edit-rules="tRules"
        @edit-disabled="editDisabledEvent"
        @selection-change="handleSelectionChange"
      >
        <template #containerNumbers="{ row }">
          <vxe-input v-model="row.containerNumber"></vxe-input>
        </template>
        <template #productNameEns="{ row }">
          <vxe-input v-model="row.productNameEn"></vxe-input>
        </template>
        <template #productNames="{ row }">
          <vxe-input v-model="row.productName"></vxe-input>
        </template>
        <template #declaredUnitPrices="{ row }">
          <vxe-input v-model="row.declaredUnitPrice"></vxe-input>
        </template>
        <template #declaredNums="{ row }">
          <vxe-input v-model="row.declaredNum"></vxe-input>
        </template>
        <template #materials="{ row }">
          <vxe-input v-model="row.material"></vxe-input>
        </template>
        <template #hsCodeDescs="{ row }">
          <vxe-input v-model="row.hsCodeDesc"></vxe-input>
        </template>
        <template #categoryUses="{ row }">
          <vxe-input v-model="row.categoryUse"></vxe-input>
        </template>
        <template #productBrands="{ row }">
          <vxe-input v-model="row.productBrand"></vxe-input>
        </template>
        <template #weights="{ row }">
          <vxe-input v-model="row.weight"></vxe-input>
        </template>
        <template #lengths="{ row }">
          <vxe-input v-model="row.length"></vxe-input>
        </template>
        <template #widths="{ row }">
          <vxe-input v-model="row.width"></vxe-input>
        </template>
        <template #heights="{ row }">
          <vxe-input v-model="row.height"></vxe-input>
        </template>
        <template #productSalesUrls="{ row }">
          <vxe-input v-model="row.productSalesUrl"></vxe-input>
        </template>
        <template #productImages="{ row }">
          <img v-if="row.productImage" :src="row.productImage" style="width: 100px;" />
          <span v-else>无</span>
        </template>
        <template #productAsins="{ row }">
          <vxe-input v-model="row.productAsin"></vxe-input>
        </template>
        <template #productFnskus="{ row }">
          <vxe-input v-model="row.productFnsku"></vxe-input>
        </template>
      </vxe-grid>
    </el-form>
    <el-row :gutter="10">
      <el-col>
        <div style="float: right;">
          <el-button
            type="primary"
            :loading="loading"
            size="small"
            @click="submit"
          >
            确定下单
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang='ts' setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { VxeGridEvents } from 'vxe-table'
import { ElMessage, ElButton } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import { clientAdd } from '@/api/client/client'

const dicts = useDicts()

const { proxy } = getCurrentInstance() as any
dicts.setDicts(DictDirection.客户)
dicts.setDicts(DictDirection.产品)
dicts.setDicts(DictDirection.国家)
dicts.setDicts(DictDirection.收款币种)
dicts.setDicts(DictDirection.收货站点)
const forms = ref(undefined)
const newList = ref({
  containerNumber: '',
  productNameEn: '',
  productName: '',
  declaredUnitPrice: '',
  declaredNum: '',
  material: '',
  hsCodeDesc: '',
  categoryUse: '',
  productBrand: '',
  productSalesUrl: '',
  productImage: '',
  productAsin: '',
  productFnsku: '',
  weight: '',
  length: '',
  widht: '',
  height: '',
})
const form = ref({
  marketProducts: '',
  receivingSite: '',
  consigneeName: '',
  consigneeAddress: '',
  consigneeAddress2: '',
  consigneeCity: '',
  provinceStateCode: '',
  consigneePostcode: '',
  consigneeCountry: '',
  consigneeTel: '',
  waybillNo: '',
  fbaNo: '',
  code: '',
  vat: '',
  vatRemarks: '',
  sysOrderCategoryOrSafeguardList: [],
})
const multiple = ref(true)
const fillStart = ref(null)
const fillCount = ref(null)
const xGrids = ref(null)
const rc = [{ required: true, message: '必填', trigger: 'change' }]
const rb = [{ required: true, message: '必填', trigger: 'blur' }]
const rules = {
  marketProducts: rc,
  receivingSite: rc,
  consigneeName: rb,
  consigneeAddress: rb,
  consigneeCity: rb,
  provinceStateCode: rb,
  consigneeCountry: rc,
  reportingCurrency: rc,
}
const tRules = {
  containerNumber: rb,
  productNameEn: rb,
  productName: rb,
  declaredUnitPrice: rb,
  declaredNum: rb,
  material: rb,
  hsCodeDesc: rb,
  categoryUse: rb,
  productBrand: rb,
  weight: rb,
  length: rb,
  width: rb, 
  height: rb,
}

const handleAddPackage = () => {
  const ob = JSON.parse(JSON.stringify(form.value.sysOrderCategoryOrSafeguardList))
  const news = JSON.parse(JSON.stringify(newList.value))
  ob.push({ news })
  console.log(ob)
  proxy.form.sysOrderCategoryOrSafeguardList = ob
  console.log(proxy.form.sysOrderCategoryOrSafeguardList)
}
const handleDelPackage = () => {
  console.log(111)
}
const onFill = () => {
  if (proxy.fillStart < 1 || proxy.fillCount < 1) return ElMessage.error('无效数值')
  const obj = JSON.parse(JSON.stringify(proxy.form.sysOrderCategoryOrSafeguardList[proxy.fillStart - 1]))
  delete obj._XID
  delete obj.containerNumber
  const arr = []
  for (let i = 0; i < proxy.fillCount; i++) {
    arr.push(JSON.parse(JSON.stringify(obj)))
  }
  proxy.form.sysOrderCategoryOrSafeguardList.push(...arr)
  proxy.fillCount = 0
  proxy.fillStart = 0
}
const submit = () => {
  const code = form.value.electrifed | form.value.magneticBlt | form.value.declar | form.value.customs
  form.value.code = code
  console.log(form.value)
  clientAdd(form.value).then(res => {
    if (res.code == 200) {
      ElMessage.success('下单成功')
    }
  })
}
const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  multiple.value = !rows.length
}
const editDisabledEvent: VxeGridEvents.EditDisabled = () => {
  console.log('禁止编辑')
}
const gridOptions1 = reactive({
  border: true,
  showOverflow: true,
  sortConfig: {
    trigger: 'cell',
    remote: true,
  },
  columnConfig: {
    resizable: true,
  },
  editConfig: {
    trigger: 'click',
    mode: 'cell',
    activeMethod({ columnIndex }) {
      if (columnIndex === 1) {
        return false
      }
      return true
    },
  },
  columns: [
    { type: 'checkbox', width: 50 },
    { type: 'seq', width: 60 },
    { field: 'containerNumber', title: '货箱编号', editRender: {}, slots: { edit: 'containerNumbers' } },
    { field: 'productNameEn', title: '英文品名', editRender: {}, slots: { edit: 'productNameEns' } },
    { field: 'productName', title: '中文品名', editRender: {}, slots: { edit: 'productNames' } },
    { field: 'declaredUnitPrice', title: '申报单价', editRender: {}, slots: { edit: 'declaredUnitPrices' } },
    { field: 'declaredNum', title: '申报数量', editRender: {}, slots: { edit: 'declaredNums' } },
    { field: 'material', title: '材质', editRender: {}, slots: { edit: 'materials' } },
    { field: 'hsCodeDesc', title: '海关编码', editRender: {}, slots: { edit: 'hsCodeDescs' } },
    { field: 'categoryUse', title: '用途', editRender: {}, slots: { edit: 'categoryUses' } },
    { field: 'productBrand', title: '产品品牌', editRender: {}, slots: { edit: 'productBrands' } },

    { field: 'weight', title: '重量', editRender: {}, slots: { edit: 'weights' } },
    { field: 'length', title: '长度', editRender: {}, slots: { edit: 'lengths' } },
    { field: 'width', title: '宽度', editRender: {}, slots: { edit: 'widths' } },
    { field: 'height', title: '高度', editRender: {}, slots: { edit: 'heights' } },
    { field: 'productSalesUrl', title: '产品销售链接', editRender: {}, slots: { edit: 'productSalesUrls' } },
    { field: 'productImage', title: '图片', editRender: {}, slots: { edit: 'productImages' } },
    { field: 'productAsin', title: '产品ASIN', editRender: {}, slots: { edit: 'productAsins' } },
    { field: 'productFnsku', title: '产品FNSKU', editRender: {}, slots: { edit: 'productFnskus' } },
  ],

})

</script>
<style lang="less" scoped>
.subtitle {
  font-size: 18px;
  font-weight: 700;
}
.app-container {
  background: #fff;
  margin: 10px;
  border-radius: 10px;
  padding: 10px;
}
/deep/ .el-form-item__content {
  width: 178px;
}
.fillContainer {
  text-align: right;
  float: right;
}
</style>